import React from "react";
import { ErrorMessage, Field, Form, Formik, useField, useFormik } from "formik";
import * as Yup from 'yup'

// function App() {
//   const formik = useFormik({
//     initialValues: {
//       username: '',
//       password: ''
//     },
//     // validate: values => {
//     //   const errors = {}
//     //   if (!values.username) {
//     //     errors.username = '请输入用户名'
//     //   } else if (values.username.length > 15) {
//     //     errors.username = '用户名的长度不能大于15'
//     //   }

//     //   if (values.password.length < 6) {
//     //     errors.password = '密码的长度不能小于6'
//     //   }
//     //   return errors
//     // },
//     validationSchema: Yup.object({
//       username: Yup.string()
//         .max(15, '用户名的长度不能大于15')
//         .required('请填写用户名'),
//       password: Yup.string()
//         .min(6, '密码的长度不能小于6')
//         .required('请填写密码')
//     }),
//     onSubmit: value => {
//       console.log(value)
//     }
//   })
//   return (
//     <form onSubmit={formik.handleSubmit}>
//       <input 
//         type="text" 
//         name="username" 
//         // value={formik.values.username} 
//         // onChange={formik.handleChange} 
//         // onBlur={formik.handleBlur}
//         { ...formik.getFieldProps('username') }
//       />
//       <p>{ formik.touched.username && formik.errors.username ? formik.errors.username : null }</p>
//       <input 
//         type="password" 
//         name="password" 
//         // value={formik.values.password} 
//         // onChange={formik.handleChange} 
//         // onBlur={formik.handleBlur}
//         { ...formik.getFieldProps('password') }
//       />
//       <p>{ formik.touched.password && formik.errors.password ? formik.errors.password : null }</p>
//       <input type="submit" />
//     </form>
//   );
// }

// function MyInput ({label, ...props}) {
//   // field 表单事件
//   // meta  验证相关
//   const [field, meta] = useField(props)
//   return <div>
//     <label htmlFor={props.id}>{label}</label>
//     <input {...field} {...props} />
//     {meta.touched && meta.error ? <span>{meta.error}</span> : null}
//   </div>
// }

function Checkbox ({label, ...props}) {
  const [field, meta, helper] = useField(props)
  // 当前的数据
  const { value } = meta
  // 修改数据的方法
  const { setValue } = helper
  const handleChange = () => {
    const set = new Set(value)
    if (set.has(props.value)) {
      set.delete(props.value)
    } else {
      set.add(props.value)
    }
    setValue([...set])
  }
  return <div>
    <label>
      <input checked={value.includes(props.value)} type="checkbox" {...props} onChange={handleChange} /> {label}
    </label>
  </div>
}

function App () {
  const initialValues = {username: '', hobbies: ["足球"]}
  const handleSubmit = values => {
    console.log(values)
  }
  
  const schema = Yup.object({
    username: Yup.string()
      .max(15, '用户名的长度不能大于15')
      .required('请填写用户名'),
    // password: Yup.string()
    //   .min(6, '密码的长度不能小于6')
    //   .required('请填写密码')
  })
  return (<Formik 
    initialValues={initialValues}
    onSubmit={handleSubmit}
    validationSchema={schema}
  >
    <Form>
      <Field name="username" />
      <ErrorMessage name="username" />
      <Checkbox value="足球" label="足球" name="hobbies" />
      <Checkbox value="篮球" label="篮球" name="hobbies" />
      <Checkbox value="橄榄球" label="橄榄球" name="hobbies" />
      {/* <MyInput id="myPass" label="密码" name="password" type="password" placeholder="请输入密码" /> */}
      {/* <Field name="password" />
      <ErrorMessage name="password" />
      <Field name="content" as="textarea" />
      <Field name="subject" as="select">
        <option value="HTML">HTML</option>
        <option value="css">css</option>
        <option value="js">js</option>
      </Field> */}
      <input type="submit" />
    </Form>
  </Formik>)
}

export default App;